<template>
  <view class="container">
    <view class="header">
      <text class="title">数学算法法则练习</text>
    </view>
    <view class="section" v-for="(stage, index) in stages" :key="index">
      <text class="stage-title">{{ stage.title }}</text>
      <scroll-view class="scroll-view" scroll-x="true">
        <view
            class="card"
            :class="stage.color"
            v-for="(card, cardIndex) in stage.cards"
            :key="cardIndex"
            @click="navigateTo(card.page)"
        >
          {{ card.question }}<br>{{ card.description }}
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      stages: [
        {
          title: '加法练习',
          color: 'green',
          cards: [
            {question: '初级', description: '加法练习', page: '1-1'},
            {question: '中级', description: '加法练习', page: '1-2'},
          ]
        },
        {
          title: '减法练习',
          color: 'blue',
          cards: [
            {question: '初级', description: '减法练习', page: '1-1'},
            {question: '中级', description: '减法练习', page: '1-2'},
          ]
        },
        {
          title: '乘法练习',
          color: 'yellow',
          cards: [
            {question: '初级', description: '乘法练习', page: '1-1'},
            {question: '中级', description: '乘法练习', page: '1-2'},
          ]
        },
        {
          title: '除法练习',
          color: 'red',
          cards: [
            {question: '初级', description: '除法练习', page: '1-1'},
            {question: '中级', description: '除法练习', page: '1-2'},
          ]
        }
      ]
    }
  },
  methods: {
    navigateTo(page) {
      uni.showToast({
        title: 'Navigating to ' + page,
        icon: 'none'
      });
      uni.navigateTo({
        url: `/pages/index/stage/${page}`
      });
    },
    handleItemClick(action) {
      // 处理点击事件
      console.log('Action:', action);
    }
  }
}
</script>

<style scoped>
.container {
  text-align: center;
  background-color: #ffffff; /* 设置为纯白色 */
  padding: 20px;
  font-family: Arial, sans-serif;
}

.stage-title {
  font-size: 20px;
  margin-bottom: 20px;
  color: #4A90E2;
  font-weight: bold;
  text-align: left;
}

.header {
  margin-bottom: 20px;
  background-color: #4A90E2;
  color: white;
  padding: 20px;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.title {
  width: 100vw;
  font-weight: bold;
  text-align: center;
  font-family: Arial, sans-serif;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  font-size: 30px;
}


.scroll-view {
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
}

.card {
  display: inline-block;
  color: white;
  width: 250rpx;
  height: 120rpx;
  margin: 20px 10px 20px;
  padding: 15px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  vertical-align: top;
  text-align: center;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3);
}


.card.green {
  background: linear-gradient(135deg, #4CAF50, #8FBC8F);
}

.card.yellow {
  background: linear-gradient(135deg, #F5A623, #FFD700);
}

.card.blue {
  background: linear-gradient(135deg, #4A90E2, #87CEEB);
}

.card.red {
  background: linear-gradient(135deg, #FF5733, #FF6347);
}

.card.black {
  background: linear-gradient(135deg, #56331C, #8B4513);
}
</style>
